<template>
  <el-select style="width: 100%" v-model="groupName" value-key="id" clearable filterable  placeholder="所属集团"
    :filter-method="remoteMethod" @change="selectGroup">
    <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item">
    </el-option>
  </el-select>
</template>
<script>
import {list} from '@/api/group'
  import utils from '../../utils/utils.js'
  export default {
    // props: ['groupName','groupId'],
    data() {
      return {
        groupName: '',
        list: [],
        query:{
          groupId:'',
          name:""
        }
      }
    },
    props:{
      queryTitle:{
        type:String,
        value:'请选择所属集团'
      },
      groupName:{
        type:String,
        value:''
      },
      groupId:{
        type:String,
        value:''
      },
    },
    watch:{
      groupName(newval,oldval){
        this.groupName=newval
      },
      groupId(newval,oldval){
        this.groupId=newval
        this.loadGroup('')
      }
    },
    created(){
      var _this = this
       if(!utils.isNull(this.groupName)){
          _this.groupName = this.groupName
        }
      if(!utils.isNull(this.groupId)){
        _this.groupId = this.groupId
      }
       _this.loadGroup('')
    },
    methods: {
      remoteMethod(query) {
        this.loadGroup(query)
      },
      loadGroup(query) {
        var _this = this
        let params = new URLSearchParams();
        params.append('keyword', query)
        if(!utils.isNull(_this.groupId)){
          params.append("groupId",_this.groupId);
        }
        list(params).then(response => {
          _this.list = response.data.data
          if(!utils.isNull(_this.groupName)){
            _this.groupName = this.groupName
          }
        })
      },
      selectGroup(e) {
        if (!utils.isNull(e)) {
          this.query.groupId = e.id
          this.query.name = e.name
        } else {
          this.query.groupId=""
          this.query.name = ''
        }
         this.$emit('queryGroupClick',this.query)
      },
    },
    }
</script>

<style>
</style>
